<template>
  <div class="cms-views-container cms-register-page">
    <div>
      <header class="flex items-center justify-end h-10 px-4">
        <img :src="headerIcons.login_close" alt="" class="w-[26px] h-[26px]" />
      </header>

      <h2 class="px-8 my-0 text-xl font-medium text-black">{{ type === 5 ? '注册成功' : '一键注册' }}</h2>
    </div>

    <form class="px-8 pt-6">
      <div class="login-input">
        <span class=""> <label class="pr-6">账号</label> <label>sp2022042612x</label> </span>
        <img :src="headerIcons.change" alt="" v-if="type !== 5" class="w-6 h-6" />
      </div>

      <div class="login-input">
        <span>
          <label class="pr-6">密码</label>
          <!-- <label v-if="type !== 1">
            <span v-if="type !== 3">
              <i v-for="item in 8" class="inline-block w-1 h-1 bg-black mx-[2px] login-password-dot"></i>
            </span>
          </label> -->
          <label>dddasffal</label>
        </span>
        <img :src="headerIcons.eye" alt="" class="w-6 h-6 ml-4" />
      </div>
    </form>

    <div class="px-8 mt-[18px] relative" v-if="type !== 5">
      <img :src="headerIcons.checkbox" alt="" class="w-[18px] h-[18px] mr-[3px]" />

      <span class="text-xs text-[#8f9299]"
        >已阅读并同意<a class="login-primary">用户协议</a>和<a class="login-primary">隐私协议</a></span
      >
      <button
        class="block mt-6 h-[42px] w-full text-white border-0 bg-gradient-to-r from-[#ff983f] to-[#ff613f] rounded-lg"
      >
        注册
      </button>
      <p class="flex items-center justify-between mt-4 mb-0 login-footer">
        <a href="javascript:;">忘记密码?</a>
        <a href="javascript:;">已有账号</a>
      </p>
      <div v-if="type === 2" class="absolute w-[270px] h-[155px] login-dialog text-center">
        <p class="pt-4 m-0 text-base text-black">需要加入您的“照片”</p>
        <p class="px-4 m-0 text-sm text-black">
          是否允许此app访问您的相册? 把注册的账号和密码保存到相册中，当你忘记账号密码时，可在相册中找回
        </p>
        <footer class="w-full h-9 mt-[18px] flex justify-between">
          <a class="text-[#0a7aff] text-center w-1/2 h-full">不允许</a>
          <a class="text-[#0a7aff] text-center w-1/2 h-full">好</a>
        </footer>
      </div>
      <div v-if="type === 4" class="absolute w-[270px] h-[146px] login-dialog text-center">
        <p class="pt-4 m-0 text-base text-black">提示</p>
        <p class="px-4 m-0 text-sm text-black">为了方便记住账号密码, 点击“知道了”后, 请您手动截图保存“账号密码”。</p>
        <div class="w-full mt-[30px] flex justify-center">
          <a class="text-[#0a7aff] text-center w-1/2 h-full text-base">知道了</a>
        </div>
      </div>
      <span
        class="inline-block absolute bottom-8 w-[144px] h-[39px] login-pravite-text rounded-lg text-white text-sm text-center leading-9"
        v-if="type === 3"
        >密码已保存至相册</span
      >
    </div>
    <div class="px-8 mt-6" v-else>
      <button
        class="block mt-6 h-[42px] w-full text-white border-0 bg-gradient-to-r from-[#ff983f] to-[#ff613f] rounded-lg"
      >
        立即登录
      </button>
    </div>
    <div class="absolute top-0 left-0 right-0 w-full h-full mask-player" v-if="type === 2 || type === 4"></div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import headerIcons from '../assets/login'

withDefaults(defineProps<{ type: number }>(), { type: 1 })

// const map = {}
</script>

<style scoped lang="less">
.cms-register-page {
  .login-input {
    height: 53px;
    border-bottom: 1px solid #f1f3f7;
    @apply flex items-center justify-between;
    label {
      @apply text-sm text-[#484a4d];
    }
  }
  .login-checked {
    border: 1px solid #c4c4c5;
    border-radius: 50%;
  }
  // TODO: 后期改成css 变量
  .login-primary {
    color: #ff613f;
  }
  .login-footer {
    a {
      color: #484a4d;
    }
  }
  .login-password-dot {
    border-radius: 50%;
  }
  .login-pravite-text {
    background-color: rgba(0, 0, 0, 0.65);
    left: 50%;
    transform: translateX(-50%);
  }
  .login-type-checked {
    border-radius: 50%;
    @apply flex items-center;
  }
  .login-dialog {
    background: rgba(255, 255, 255);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    bottom: -30px;
    border-radius: 14px;
    footer {
      border-top: 1px solid;
      border-color: rgba(60, 60, 67, 0.36);
      a {
        font-size: 17px;
        line-height: 36px;
        &:nth-child(1) {
          border-right: 1px solid;
          border-color: rgba(60, 60, 67, 0.36);
        }
      }
    }
  }
  .mask-player {
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>
